/**
 * 卡片详情
 */
const CardDetails = Vue.component('card-component', {
    template: '#card-temp',
    data() { 
        return {
            title: "",
            description: "",
            loading:true
        }
    },
    mounted () {
      this.init()  
    },
    methods: {
        init() { 
            axios.get("../json/card-data.json").then(res => { 
                console.log("res:",res)
                const { message, status, data: { cardDetails } } = res
                this.title = cardDetails.title
                this.description = cardDetails.description
                this.loading = false
            }).catch(error => { 
                this.loading = true
            })
        }
    }
})
/**
 * 卡片列表
 */
const CardList = Vue.component('card-list', {
    template: '#list-card',
    data() {
        return {
            queryParams: {
                current: 1,
                pageSize: 20,
                total:200,
                title: "",
                description: "",
            }, 
            loading: true,
            cardList:[]
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            axios.get("./json/card-list.json").then(res => {
                console.log("列表res:", res)
                const { message, status, data: { data: { cardList, current, pageSize } }} = res
                this.cardList = cardList
                this.loading = false
                this.queryParams.current = current
                this.queryParams.pageSize = pageSize
            }).catch(error => {
                this.loading = true
            })
        }
    }
})
/**
 * 主页
 */
const Home = Vue.component('home-view', {
    template: '#home-view',
    components: {
        "card-list": CardList
    },
    data() {
        return {

        }
    }
})
/**
 * 消息
 */
const Message = Vue.component('message-view', {
    template: '#message-view',
    data() {
        return {

        }
    }
})
/**
 * 搜索
 */
const Search = Vue.component('search-view', {
    template: '#search-view',
    data() {
        return {

        }
    }
})
/**
 * 我的
 */
const My = Vue.component('my-view', {
    template: '#my-view',
    data() {
        return {

        }
    }
})